<template>
  <div class="carousel-container">
    <el-carousel
      v-model:current-index="currentIndex"
      :autoplay="true"
      :interval="5000"
      arrow="hover"
      :indicator-position="'none'"
      height="320px"
      @change="handleChange">
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <div class="carousel-item-wrapper">
          <img :src="item.image" :alt="item.alt" class="carousel-image" />
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { ElCarousel, ElCarouselItem } from 'element-plus';
  import 'element-plus/dist/index.css';

  // 轮播图数据
  const carouselItems = ref([
    {
      id: 1,
      image: 'https://imgs.nexbie.com/uploads/1cf81ae25ef54275a97f493f2972883d.jpg',
      alt: 'Design Image 1',
    },
    {
      id: 2,
      image: 'https://imgs.nexbie.com/uploads/eda4ed283d14467585d083d6bf6479b3.jpg',
      alt: 'Design Image 2',
    },
    {
      id: 3,
      image: 'https://imgs.nexbie.com/uploads/2a70976043194d72b39ed834f6a7fbda.jpg',
      alt: 'Design Image 3',
    },
    {
      id: 4,
      image: 'https://imgs.nexbie.com/uploads/1cf81ae25ef54275a97f493f2972883d.jpg',
      alt: 'Design Image 4',
    },
    {
      id: 5,
      image: 'https://imgs.nexbie.com/uploads/eda4ed283d14467585d083d6bf6479b3.jpg',
      alt: 'Design Image 5',
    },
  ]);

  // 当前轮播图索引
  const currentIndex = ref(0);

  // 轮播切换回调
  const handleChange = (index: number) => {
    console.log('当前轮播图索引:', index);
    // 这里可以添加切换时的自定义逻辑
  };
</script>

<style scoped lang="scss">
  .carousel-container {
    width: 100%;
    border-radius: 8px; // 增大圆角值
    overflow: hidden; // 确保容器内容不溢出圆角
  }

  .carousel-item-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
</style>
